<%@ page import="main.java.com.entity.Category" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>添加菜品</title>
    <style>
        body {
            text-align: center;
        }

        form {
            border: 1px solid #ccc;
            padding: 20px;
            width: 40%;
            margin: auto;
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        input[type="text"],
        input[type="number"],
        input[type="file"],
        textarea,
        select {
            width: 100%;
            padding: 8px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
        }

        input[type="submit"] {
            padding: 10px 20px;
            background-color: #333;
            color: white;
            border: none;
            cursor: pointer;
        }

        input[type="submit"]:hover {
            background-color: #555;
        }

        /* 添加提示信息的样式 */
        .success-message {
            color: green;
            margin-bottom: 10px;
            font-weight: bold;
        }
    </style>
    <script src="js/jquery-3.7.1.js"></script>
    <script>
        $(document).ready(function () {
            $("form").submit(function (e) {
                e.preventDefault();
                // 可以在这里添加更多的前端验证逻辑，比如图片格式验证等（此处简单示例只检查必填项）
                var name = $("#name").val();
                var category_id = $("#category_id").val();
                var price = $("#price").val();
                var image = $("#image").val();
                var description = $("#description").val();
                var status = $("#status").val();

                if (!name || !category_id || !price || !image || !description || !status) {
                    alert("所有项都为必填项，请检查输入！");
                    return false;
                }

                this.submit();
            });

            // 检查后端是否传递了添加成功的提示信息，如果有则展示在页面上
            var addSuccessMsg = "${addSuccess}";
            if (addSuccessMsg) {
                $(".success-message").html(addSuccessMsg);
            }
        });
    </script>
</head>

<body>
<h1>添加菜品</h1>
<div class="success-message"></div>
<form action="AddDishServlet" method="post">
    <label for="name">菜品名称：</label>
    <input type="text" id="name" name="name" required><br>
    <label for="category_id">菜品分类：</label>
    <select id="category_id" name="category_id" required>
        <%
            List<Category> categories = (List<Category>) request.getAttribute("categories");
            if (categories != null) {
                for (Category category : categories) {
                    out.println("<option value='" + category.getId() + "'>" + category.getName() + "</option>");
                }
            }
        %>
    </select><br>
    <label for="price">菜品价格：</label>
    <input type="text" id="price" name="price" required><br>
    <label for="image">图片：</label>
    <input type="file" id="image" name="image" required><br>
    <label for="description">描述信息：</label>
    <textarea id="description" name="description"></textarea><br>
    <label for="status">售卖状态：</label>
    <select id="status" name="status" required>
        <option value="0">停售</option>
        <option value="1">起售</option>
    </select><br>
    <input type="submit" value="添加菜品">
</form>
</body>

</html>
